<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
	</head>
	<body>
		<html>
<div id="form">
   	<div class="name-box">
   		<span>姓名</span>
   		<input id="userName" type="text" placeholder="请输入姓名"/>
   	</div>
   	<div class="id-box">
   		<span>身份证号</span>
   		<input id="id" type="text" placeholder="请输入身份证号"/>
   	</div> 
   	<div class="photo-box submit submitBox">
   		<input type="hidden" id="picIndex" value="0">
   		<button id="cameraBtn"  onclick="showActionSheet()"></button>
   		<div id='image-list' class="row image-list"></div>
		<img src="../../resource/limit/camera.png" />
		<img id="imgs">
   	</div>
  	</div>
</html>
<script src="_static_resource/js/mui.js"></script>
<script>
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() {
	console.log("plusready");
}

 //点击事件，弹出选择摄像头和相册的选项
function showActionSheet() {  
    var bts = [{  
        title: "拍照"  
    }, {  
        title: "从相册选择"  
    }];  
    plus.nativeUI.actionSheet({  
            cancel: "取消",  
            buttons: bts  
        },  
        function(e) {  
            if (e.index == 1) {  
                captureImage();  
            } else if (e.index == 2) {  
                galleryImgs();  
            }  
        }  
    );  
}

// 拍照
function captureImage(){
	var cmr = plus.camera.getCamera();
	var res = cmr.supportedImageResolutions[0];
	var fmt = cmr.supportedImageFormats[0];
//	console.log("Resolution: "+res+", Format: "+fmt);//分辨率和格式
	cmr.captureImage( function( path ){
		plus.io.resolveLocalFileSystemURL(path, function(entry) { 
 			var path = entry.toLocalURL(); //图片路径
			//压缩文件
			compressImage(path,entry.name);
        }, function(entry) {  
		       plus.nativeUI.toast("读取拍照文件错误：" + entry.message);  
		   });
		},
		function( error ) {
			alert( "Capture image failed: " + error.message );
		},
	);
}

 //从相册选择照片
function galleryImgs() {  
    plus.gallery.pick(function(e) {  
    	var name = e.substr(e.lastIndexOf('/') + 1);
   		compressImage(e,name);
    }, function(e) {  
    }, {  
        filter: "image"  
    });  
}

//压缩图片  
   function compressImage(url,filename){  
       var name="_doc/upload/"+filename;
	   plus.zip.compressImage({  
           src:url,//src: (String 类型 )压缩转换原始图片的路径  
		   dst:name,//压缩转换目标图片的路径  
		   quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
		   overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件  
	   },  
	   function(zip) {
		   //页面显示图片
		   showPics(zip.target,name);
	   },function(error) {  
	       plus.nativeUI.toast("压缩图片失败，请稍候再试");  
	   });  
   }

 var picUrl;//图片
 function showPics(url,name){    	   
    	 //根据路径读取到文件 
   plus.io.resolveLocalFileSystemURL(url,function(entry){
	   entry.file( function(file){
		   var fileReader = new plus.io.FileReader();
		   fileReader.readAsDataURL(file);
       	   fileReader.onloadend = function(e) {
    	       picUrl = e.target.result.toString();//图片(base64)
    	       console.log(picUrl+'------------');
    	       var picIndex = $("#picIndex").val();
	       		var nowIndex = parseInt(picIndex)+1;
	       		$("#picIndex").val(nowIndex);
	       		var html = '';
	       		html += '<div class="image-item " id="item'+nowIndex+'">';
	       		html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';
	       		html += '</div>';
	       		html += $("#image-list").html();
	       		$("#image-list").html(html); 
       		}
      });
  }); 
}
</script>
	</body>
</html>